<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="org.gnomus.server.C" %>
<%@ page import="javax.swing.*" %>
<%@ page import="java.util.LinkedList" %>
<%
  Context ctx = Context.get();
  Map item = (Map) ctx.data.get("item");
  List<Map> activity_list = (List<Map>) item.get("activity");
  Map activity = (activity_list != null && activity_list.size() > 0 ? activity_list.get(0) : null);
  String subtype = activity == null ? null : (String) activity.get("subtype");
  if (subtype == null) {
    subtype = "images";
  }
  List<Map> isotopes = (List<Map>) activity.get("isotope");
%>
<script type="text/javascript">
  $(document).ready(function() {
    DragAndDrop.play(<%= new Gson().toJson(activity) %>);
  });
</script>
<p>
  Activity (drag and drop <%= C.DRAG_AND_DROP_SUBTYPES.get(subtype).toLowerCase() %>)
  <a class="small" href="/activity/edit?id=<%= activity.get("id") %>">
    edit
  </a>
  <a class="small" onclick="DragAndDrop.reset();">
    reset
  </a>

  <a class="small" onclick="DragAndDrop.score()">
    score
  </a>
</p>
<div id="play_drag_and_drop">
  <%
    if ("isotopes".equals(subtype) && isotopes != null) {
  %>
  <table style="margin: 0 auto;">
    <tr>
  <%
      for (Map isotope : isotopes) {
        String value = (String) isotope.get("value");
  %>
      <td style="width:220px;height:220px">
        <canvas id="<%= value %>" class="isotope" width="200" height="200"
                draggable="true" data-value="<%= value %>" ondragstart="dnd.start(event)"
                ondrag="dnd.drag(event)" ondragend="dnd.dragEnd(event)"></canvas>
      </td>
  <%
      }
  %>
    </tr>
    <tr>
  <%
      for (int i = 0; i < isotopes.size(); i++) {
        %>
      <td class="answer" style="width:220px;height:220px"
          ondragover="dnd.over(event)" ondrop="dnd.drop(event)">
      </td>
  <%
      }
  %>
    </tr>
  </table>
  <script type="text/javascript">
  </script>
  <%
    }
  %>
</div>